<!--
 * @Author: Wang WeiHao
 * @Date: 2024-10-12 16:08:48
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-10-17 16:09:43
 * @Description: 
 * @FilePath: \geo-base-dm\src\views\main\ai-processing\vectorAnalysis.vue
-->
<template>
	<div class="box1">
		<div class="table">
			<el-table
				class="list-table"
				:data="chartsData"
				:header-cell-style="{
					background: '#113659',
					fontWeight: 400,
					color: '#fff',
				}"
				height="300"
				:header-row-style="{ background: '#113659' }"
				:row-style="{ background: '#0a2641' }"
				:cell-style="{ background: '#0a2641', borderBottom: '1px solid #184168', color: '#fff' }"
			>
				<el-table-column fixed prop="type" label="用地分类" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="area" label="总面积(平方千米)"> </el-table-column>
				<!-- <el-table-column :prop="item" :label="item" v-for="(item, index) in labelList" :key="index">
				</el-table-column> -->
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps<{
	chartsData: Array<any>;
}>();
</script>

<style lang="scss" scoped>
.box1 {
	width: 800px;
	// height: 300px;
}

.table {
	width: 100%;
	height: 400px; /* 确保高度固定，超过时自动滚动 */
	overflow: auto; /* 超出部分滚动 */
}
.list-table {
	--el-table-border-color: none;
	background-color: transparent;
	@apply w-full;
	.data-tag {
		@apply flex items-center justify-center;
		width: 54px;
		height: 20px;
		background: #276eb7;
		border-radius: 50px 50px 50px 50px;
		&.data-tag-off {
			background: #d77820;
		}
	}
	.el-button {
		margin-right: 12px;
	}
	.el-table__empty-block {
		background-color: #0a2641;
	}
}
</style>
